<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <SearchForm
      v-model:search-items="searchItems"
      :form-config="formConfig"
      :cache-key="_props.cacheKey"
      @search="handleSearch"
    />
  </ele-card>
</template>

<script setup>
import { ref } from "vue";
import SearchForm from "@/components/CommonSearch/SearchForm.vue";

const emit = defineEmits(["search"]);

// 定义接收的props
const _props = defineProps({
  cacheKey: {
    type: String,
    required: true,
  },
});

// 日期选择器快捷选项
const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 0);
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一个月",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 0);
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      start.setDate(1);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      end.setHours(23, 59, 59, 0);
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    },
  },
];

// 定义搜索项配置
const searchItems = ref([
  {
    label: "任务id",
    prop: "task_id",
    component: "el-input",
    visible: true,
    span: { lg: 6, md: 8, sm: 12, xs: 24 },
    props: {
      clearable: true,
      placeholder: "请输入任务id",
    },
  },
  {
    label: "名称",
    prop: "name",
    component: "el-input",
    visible: true,
    span: { lg: 6, md: 8, sm: 12, xs: 24 },
    props: {
      clearable: true,
      placeholder: "请输入名称",
    },
  },
  {
    label: "表名",
    prop: "table_name",
    component: "DictTypeData",
    visible: true,
    span: { lg: 6, md: 8, sm: 12, xs: 24 },
    props: {
      code: "export",
      placeholder: "请选择导出表",
    },
  },
  {
    label: "状态",
    prop: "status",
    component: "DictData",
    visible: true,
    span: { lg: 6, md: 8, sm: 12, xs: 24 },
    props: {
      code: "status",
      placeholder: "请选择状态",
    },
  },
  {
    label: "操作时间",
    prop: "dateRange",
    component: "el-date-picker",
    visible: true,
    span: { lg: 12, md: 12, sm: 12, xs: 24 },
    props: {
      unlinkPanels: true,
      type: "datetimerange",
      rangeSeparator: "-",
      shortcuts: shortcuts,
      valueFormat: "YYYY-MM-DD HH:mm:ss",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
    },
  },
]);

/** 表单配置 */
const formConfig = ref({
  task_id: "",
  name: "",
  category_id: "",
  status: "",
  dateRange: [],
});

/** 处理搜索 */
const handleSearch = (formData) => {
  const { dateRange, ...rest } = formData;
  const [create_time_start, create_time_end] = dateRange || [];
  emit("search", {
    ...rest,
    create_time_start,
    create_time_end,
  });
};
</script>
